<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/homemobile/sulib/reset.css">
  <link rel="stylesheet" href="/homemobile/sulib/all.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
</head>
<body>

<div id="app">
  <van-nav-bar title="批量加好友" left-arrow></van-nav-bar>
  <div class="pd">
    <van-notice-bar
        left-icon="info-o"
        wrapable
        :scrollable="false"
    >
      请下载模板后输入手机号，可批量复制手机号至模板内，若输入的内容有重复手机号或空行将会自动过滤
    </van-notice-bar>

    <div class="mt title">批量加好友 </div>
    <div class="mt down">
      <a href="#">点我下载 Excel表格模板</a>
    </div>
    <van-cell-group class="mt">
      <van-cell title="选择表格:" >
        <van-uploader :after-read="afterRead" >
          <van-button size="mini"  icon="plus" type="primary">上传文件</van-button>
        </van-uploader>
      </van-cell>
      <van-cell title="选择员工:" is-link @click="showUser = true">!{!{ user}}</van-cell>
      <van-cell title="客户标签:" is-link @click="show = true">!{!{usertag}}</van-cell>
    </van-cell-group>

    <div class="mt">
      <van-notice-bar wrapable color="#333" background="#ecf9ff" >
        <p>表格内手机号将平均分配给选择的员工，分配完成后员工会在企业微信收到添加好友的任务</p>
        <p style="margin-top: 10px">设置标签后，表格内添加成功的客户将会被自动添加选择的标签</p>
      </van-notice-bar>
    </div>

    <div class="mt">
      <van-button size="small" type="info" block>提交</van-button>
    </div>
    <div class="mt">
      <van-button size="small" block>取消</van-button>
    </div>


  </div>



  <van-popup v-model="showUser">
    <div class="pd popup">
      <div class="title">请选择员工</div>
      <div class="mt">
        <van-search
            v-model="search"
            placeholder="请输入搜索关键词"
            @search="onSearch"
        >
        </van-search>
      </div>
      <div>
        <van-tag @click="setUser(item)" class="tag" v-for="(item,index) in 10" type="primary">标签 !{!{index}}</van-tag>
      </div>
    </div>
  </van-popup>

  <van-popup v-model="show">
    <div class="pd popup">
      <div class="title">请选择客户标签</div>
      <div class="mt">
        <van-tag @click="setUserTag(item)" class="tag" v-for="(item,index) in 10" type="primary">标签 !{!{index}}</van-tag>
      </div>
    </div>
  </van-popup>



</div>

<script src="/homemobile/sulib/vue.js"></script>
<script src="/homemobile/sulib/moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            show:false,
            showUser:false,
            search:'',
            user:'请选择',
            usertag:'请选择',

        },
        methods:{
            afterRead:function(file){
                console.log(file)
            },
            onSearch:function(){

            },
            setUserTag:function(item){
                this.usertag = item;
                this.show = false;
            },
            setUser:function(item){
                this.user = item;
                this.showUser = false;
            },
        }
    });

</script>
</body>
</html>
